<html>
  <head>
    <meta charset="UTF-8">
    <title>卫琴姐姐的作品</title>
    <script src="vue.js"></script>
    <style>
      table {
        border: 1px solid black;
        width: 100%;
      }
      th {    
        height: 50px;  
      }
      th, td {
        border-bottom: 1px solid #ddd;
        text-align: center;
      }
      .markline {
        background-color: #FFCC66;
      }
    </style>
  </head>

  <body>
    <div id = "app">
      <table>
        <tr>
          <th>序号</th>
          <th>书名</th>
          <th>作者</th>
          <th>出版社</th>
        </tr>
        <tr v-for="(book, index) in books" 
               :class="{markline : index % 2 !== 0}">
          <td>{{ index+1 }}</td>
          <td>{{ book.title }}</td>
          <td>{{ book.author }}</td>
          <td>{{ book.publisher }}</td>
        </tr>
      </table>
    </div>

    <script>
      const vm=Vue.createApp({
        data(){
          return { 
            books: [
              { title: '《精通Vue.js：Web前端开发技术详解》',
                author: '孙卫琴',
                publisher: '清华大学出版社'},
              { title: '《基于Spring：Java Web开发技术详解》',
                author: '孙卫琴',
                publisher: '清华大学出版社'},
              { title: '《精通JPA与Hibernate: Java对象持久化技术详解》',
                author: '孙卫琴',
                publisher: '清华大学出版社'},
              { title: '《大话Java程序设计从入门到精通》',
                author: '孙卫琴',
                publisher: '电子工业出版社'},
              { title: '《Tomcat与Java Web开发技术详解》',
                author: '孙卫琴',
                publisher: '电子工业出版社'},
              { title: '《Java面向对象编程》',
                author: '孙卫琴',
                publisher: '电子工业出版社'},
              { title: '《精通Struts: 基于MVC的Java Web设计与开发》',
                author: '孙卫琴',
                publisher: '电子工业出版社'},
              { title: '《Java网络编程核心技术详解》',
                author: '孙卫琴',
                publisher: '电子工业出版社'},
              { title: '《Java逍遥游记》',
                author: '孙卫琴',
                publisher: '电子工业出版社'},
              { title: '《Hibernate逍遥游记》',
                author: '孙卫琴',
                publisher: '电子工业出版社'},
              { title: '《Java 2认证考试指南与试题解析》',
                author: '孙卫琴',
                publisher: '上海科学技术出版社'}
            ]
          }
        }
      }).mount('#app')
    </script>
  </body>
</html>